<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .nav {
            text-align: center;
            position: relative;
            width: 300px;
            margin: 0 auto;
        }

        .nav button {
            position: absolute;
            left: 80px;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
            display: none;
        }

        li {
            list-style: none;
        }
          

        li a {
            text-decoration: none;
            color: red;
        }

        body {
            width: 100%;
            height: 100%;
            background-image: url(liu.jpg);
             background-repeat: no-repeat; 
             background-size: 100%;

             
        }

        li:hover a {
            color: blueviolet;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <h2>作业你懂不懂！！！</h2>
        <button type="button">点我有惊喜</button>
    </div>
    <div class="box">


        <ul>
            <li><a href="日历.html">rili</a></li>
            <li><a href="lianxi.html">百度首页导航</a></li>
            <li><a href="0803.html">0803作业</a></li>
            <li><a href="还得努力.html">千图网</a></li>
            <li><a href="0807/豪车.html">我的车</a></li>
            <li><a href="0807/美眉.html">我的妹子</a></li>
            <li><a href="0807/想开豪车.html">我的资产</a></li>
            <li><a href="优酷.html">优酷</a></li>
            <li><a href="优酷下拉菜单.html">下拉菜单</a></li>
            <li><a href="定时器.html">定时器</a></li>
            <li><a href="刘霄唯品会/唯品会.html">唯品会</a></li>
            <li><a href="列表.html">列表</a></li>
            <li><a href="下拉菜单.html">下拉菜单</a></li>
            <li><a href="./新/遮罩层.html">遮罩层</a></li>
            <li><a href="./新/lun.html">轮播图</a></li>
            <li><a href="zuoye/图片切换.html">图片切换</a></li>
            <li><a href="zuoye/微博.html">微博</a></li>
            <li><a href="zuoye/五星评分.html">五星评分</a></li>
             <li><a href="./小米商城/小米商城.html">小米商城</a></li>
        </ul>
    </div>

</body>

</html>
<script>
     var button = document.querySelector('button');
     var box  = document.querySelector('.box');

       button.onclick = function(){
            box.style.display='block';

       }


</script>